<template>
    <el-card>
        <el-table :data="skuList" border class="mb-10" >
            <el-table-column type="index" label="序号" width="80" align="center" />
            <el-table-column label="名称" prop="skuName" />
            <el-table-column label="描述" prop="skuDesc" />
            <el-table-column label="默认图片">
                <template #default="{ row, $index }">
                    <img :src="row.skuDefaultImg" width="80" height="80">
                </template>
            </el-table-column>
            <el-table-column label="重量(KG)" prop="weight" />
            <el-table-column label="价格(元)" prop="price" />
            <el-table-column label="操作" width="250" align="center">
                <template #default="{ row, $index }">
                    <el-button :type="row.isSale ? 'success' : 'info' " size="small" :icon="row.isSale ? Top : Bottom" @click="cancelSaleOrSale(row)" ></el-button>
                    <el-button type="primary" ref="buttonRef" size="small" :icon="Edit"></el-button>
                    <el-button type="info" size="small" :icon="InfoFilled"></el-button>
                    <el-popconfirm :title="`请确认是否删除[${row.skuName}]?`" @confirm="handleDelete(row)">
                        <template #reference>
                            <el-button type="danger" size="small" :icon="Delete"></el-button>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination v-model:currentPage="page" layout="prev, pager, next, jumper" :total="total" @current-change="handleCurrentChange" />
    </el-card>

</template>

<script setup lang="ts">
import type { SkuModel } from '@/api/sku';
import skuApi from '@/api/sku';
import { Edit, Bottom, InfoFilled, Delete, Top } from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus';
import { nextTick, onMounted, ref } from 'vue';
const skuList = ref<SkuModel[]>([])
const page = ref(1)
const limit = ref(10)
const total = ref(0)
const buttonRef = ref()
// 获取sku列表
const getSkuPage = async () => {
    try {
        let result = await skuApi.getPage(page.value, limit.value)
        skuList.value = result.records
        total.value = result.total
    } catch (error) {
        ElMessage.error('获取SKU列表失败')
    }
}
// 上架或下架
const cancelSaleOrSale = async (row: SkuModel) => {
    if(row.isSale){
        try {
            await skuApi.cancelSale(row.id!)
            row.isSale = 0
            ElMessage.success('下架成功')
        } catch (error) {
            ElMessage.error('下架失败')
        }
    } else {
        try {
            await skuApi.onSale(row.id!)
            ElMessage.success('上架成功')
            row.isSale = 1
        } catch (error) {
            ElMessage.error('上架失败')
        }
    }
}
// 删除sku
const handleDelete = async (row: SkuModel) => {
    try {
        await skuApi.delete(row.id!)
        ElMessage.success('删除成功')
        getSkuPage();
    } catch (error) {
        ElMessage.error('删除失败')
    }
}
// 翻页
const handleCurrentChange = (val: number) => {
    page.value = val;
    getSkuPage();
}
onMounted(() => {
    getSkuPage();
})
</script>

<style scoped>

</style>